<script setup lang="ts">
import { ref, computed } from 'vue';
import { Field, Button, CellGroup, Checkbox, showToast } from 'vant';
import { rq } from '@/utils/request';
import { useRouter } from 'vue-router';  // 引入 useRouter

// 表单数据
const phoneNumber = ref('15244667237');
const verificationCode = ref('');
const agreeToTerms = ref(false);

// 获取验证码按钮的状态
const canGetCode = ref(true);
const countdown = ref(0);

// 手机号正则表达式
const phoneRegex = /^1[3-9]\d{9}$/;

// 表单校验
const isFormValid = computed(() => {
  return (
    phoneRegex.test(phoneNumber.value) &&
    verificationCode.value.length === 6 &&
    agreeToTerms.value
  );
});

// 获取验证码
const getCode = async () => {
  if (!phoneRegex.test(phoneNumber.value)) {
    showToast({ type: 'fail', message: '请输入有效的手机号' });
    return;
  }

  canGetCode.value = false;
  countdown.value = 3;

  try {
    const response = await rq('/code', 'get', { phone: phoneNumber.value });
    verificationCode.value = response.data.code;
    showToast({ type: 'success', message: '验证码获取成功' });
  } catch (error) {
    showToast({ type: 'fail', message: '验证码获取失败' });
  } finally {
    const interval = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(interval);
        canGetCode.value = true;
      }
    }, 1000);
  }
};

// 提交表单
const submitForm = async () => {
  if (!isFormValid.value) {
    showToast({ type: 'fail', message: '请检查表单信息' });
    return;
  }

  try {
    const response = await rq('/login', 'post', {
      phone: phoneNumber.value,
      code: verificationCode.value,
    });
    showToast({ type: 'success', message: '登录成功' });
    // 跳转到/user页面
    router.push('/user');
  } catch (error) {
    showToast({ type: 'fail', message: '登录失败' });
  }
};

// 声明 router
const router = useRouter();
</script>

<template>
  <div class="login-container">
    <h2>登录</h2>
    <CellGroup>
      <Field
        v-model="phoneNumber"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <Field
        v-model="verificationCode"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <template #button>
          <Button
            size="small"
            type="primary"
            :disabled="!canGetCode"
            @click="getCode"
          >
            {{ canGetCode ? '获取验证码' : `${countdown}秒后重试` }}
          </Button>
        </template>
      </Field>
    </CellGroup>
    <Button
      type="primary"
      block
      :disabled="!isFormValid"
      @click="submitForm"
    >
      登录
    </Button>
    <div class="terms">
      <Checkbox v-model="agreeToTerms">我已阅读并同意《用户协议》</Checkbox>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.van-cell-group {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.van-field__label {
  width: 70px;
  color: #666;
}

.van-field__control {
  font-size: 16px;
  color: #333;
}

.van-button--primary {
  background-color: #1989fa;
  border-color: #1989fa;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 20px;
}

.terms {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.van-checkbox__label {
  color: #666;
  font-size: 14px;
}
</style>